import React from 'react';
import Luo from 'iscroll-luo';
import axios from "axios"
class App extends React.Component {
   state = {
       data:[1,2,3],
       arr:[],
       flag:false
   }
 
  /** 下拉刷新 **/
  onDown() {
    this.getList("xiala")
    this.setState({
        flag:false
    })
    /** 注意此处，就算没有数据或接口调用失败了等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/
  }
  componentDidMount(){
        this.getList()
  }
  
  getList (name) {
    if (name === "xiala" || typeof(name)==='undefined') {
        axios.get("/getlist").then(res=>{
            this.setState({
                arr:res.data
            })
        })
    } else if (name === "shangla") {
        if (this.state.arr.length <=40) {
            axios.get("/getlist").then(res=>{
                let newarr = [...this.state.arr,...res.data]
                this.setState({
                    arr:newarr
                })
             })
        } else {
          this.setState({
              arr:this.state.arr,
              flag:true
          })
        }
       
    } 
  
  }

  /** 上拉加载更多 **/
  onUp() {
     this.getList("shangla")
  	// this.setState({
  	// 	data: [...this.state.data, 1, 2, 3], // 在原始数据后面加更多数据
  	// });
    /** 注意此处，就算没有更多数据了或接口调用失败了等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/
  }
 
  render() {
  	return (
            <div style={{ position: 'relative', height: '100vh' }}>
                <Luo
  				id='id'
  				onDown={() => this.onDown()}
            	onUp={() => this.onUp()}
  			>
  				{
      				this.state.arr.map((v, i) =>
      					<div key={i}>{v.title}</div>
      				)
  				}						
  			</Luo>
              {
                  this.state.flag ?  <div>没有更多了</div> : null
              }
             
            </div>
      )
       
  		

  	
  }

}
export default App